<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <!--viewport一定要加 user-scalable 值可以是yes|no或1|0 -->
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0,maximum-scale=1.0, user-scalable=0" />
    <!-- 禁止将数字转为号码 -->
    <meta name="format-detection" content="telephone=no" />
    <!-- 控制顶栏状态栏显示样式，可以为透明 -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <!-- 添加一个网站图标，这样当你将网站添加到桌面图标时，会显示出来 -->
    <link rel="apple-touch-icon-precomposed" href="mobile_logo.png?v1" />
    <title></title>
    <!-- 重置样式 -->
    <link rel="stylesheet" href="font/iconfont.css">
    <link rel="stylesheet" href="css/reset.css" />

    <!-- 将px转rem的公式代码 -->
    <script>

        window.onload = function () {
            getRem(320, 100)
        }
        window.onresize = function () {
            getRem(320, 100)
        }
        function getRem(pwidth, prem) {
            var w = document.documentElement.getBoundingClientRect().width;
            //7.5是根据设计图的大小除以100，需要按照你的实际设计图换算
            var bili = (w / pwidth) * prem;
            document.documentElement.style.fontSize = bili + "px";

            // 此时  100px=1rem
            // 将所有在设计图量出的尺寸都除以100即可转为对应的rem
        }
    </script>
    <link rel="stylesheet" href="css/me.css">

<body>
    <!-- 网页内容 -->
    <!-- 記住写样式时將设计图量出的px除以100得到对应的rem 
  比如：10px==> 0.1rem
  -->
    <!-- 禁用了自动识别电话号码后，如何手动添加拨号识别功能 -->
    <!-- <a href="tel:15874106771">给我打电话</a> -->
    <nav class="w100 flex flex-jb flex-ac" id="fanhui">
        <i class="iconfont  icon-icon1 ml10 "></i>
        <a href="#" class="black ">我的京东</a>
        <i class="mr10"><img
                src=""
                alt=""></i>
    </nav>
    <header class="w100 pt10">
        <section>
            <article class="flex  flex-jb flex-ac">
                <div class="posir ml20">
                    <div class="tuxiang"><img src="img/5b163ef9N4a3d7aa6.png" alt=""></div>
                    <div class="white shiming tc">待实名认证></div>
                </div>
                <div class="zhi">
                    <div class="flex flex-ac">
                        <div class="font18 white">自律</div>
                        <div class="tubiao ml5"></div>
                    </div>
                    <div class="font12 xiangshou white mt5">京享值367</div>
                </div>
                <div class="sezhi mr20">
                    <img src="img/4f25fadf9ebe91d3.png" alt="">
                </div>
            </article>
            <article class="flex flex-ja mt5">

                <div class="white tc">
                    <p>1</p>
                    <p class="font12">商品收藏</p>
                </div>
                <div class="white tc">
                    <p>9</p>
                    <p class="font12">店铺收藏</p>
                </div>
                <div class="white tc">
                    <p>20</p>
                    <p class="font12">我的足记</p>
                </div>
            </article>
            <article class="flex flex-ac flex-ja">
                <div class="vip"><img src="img/5ae83d09fff874cb.png" alt=""></div>
                <div class="cutFont lingqu pl15">免费试用 立领1张运费券</div>
                <div class="shiyong">0元试用</div>
            </article>
        </section>
    </header>



    <!-- 付款 -->
    <section class="fukuan  w100 plr15 flex flex-ja">
        <div class="tc">
            <div><img src="img/71971b102d1fcbc5.png" alt=""></div>
            <p class="font12">待付款</p>
        </div>
        <div class="tc">
            <div><img src="img/b392f9ce63eb8490.png" alt=""></div>
            <p class="font12">待收货</p>
        </div>
        <div class="tc">
            <div><img src="img/1491d4cb340074bb.png" alt=""></div>
            <p class="font12">退货/售后</p>
        </div>
        <div class="tc">
            <div><img src="img/3ab434ec2686a256.png" alt=""></div>
            <p class="font12">全部订单</p>
        </div>
    </section>
    <section class="fukuan mt15 w100 plr15 flex flex-ja">
        <div class="tc">
            <div>
                <p class="fb">0</p>
            </div>
            <p class="font12">优惠卷</p>
        </div>
        <div class="tc">
            <div>
                <p class="fb">0</p>
            </div>
            <p class="font12">白条</p>
        </div>
        <div class="tc">
            <div>
                <p class="fb">0</p>
            </div>
            <p class="font12">京豆</p>
        </div>
        <div class="tc">
            <div>
                <p class="fb">0</p>
            </div>
            <p class="font12">红包</p>
        </div>
        <div class="tc">
            <div><img src="img/ac40297eb801ec8d.png" alt=""></div>
            <p class="font12">我的资产</p>
        </div>
    </section>

    <!-- 服务 -->
    <section class="fuwu mt15 w100 pb10">
        <article class="pl15">
            <h2 class="fb font14">工具与服务</h2>
        </article>
        <article class="flex flex-w">
            <div class="tc pt10">
                <div><img src="img/f4b952a87ea33ae4.png" alt=""></div>
                <p class="font12 mt10">客服服务</p>
            </div>
            <div class="tc pt10">
                <div><img src="img/bfcb210d2110a7d8.png" alt=""></div>
                <p class="font12 mt10">我的预约</p>
            </div>
            <div class="tc pt10">
                <div><img src="img/43485badf62439e9.png" alt=""></div>
                <p class="font12 mt10">高价回收</p>
            </div>
            <div class="tc pt10">
                <div><img src="img/2a00f0157c5128a2.png" alt=""></div>
                <p class="font12 mt10">闲置换钱</p>
            </div>
            <div class="tc pt10">
                <div><img src="img/d716c6822cafa2b6.png" alt=""></div>
                <p class="font12 mt10">定期收购</p>
            </div>
        </article>
    </section>

    <!-- 商品 -->
    <section class="shangping w100">
        <article class="tuijian mtb15 flex flex-ac plr10">
            <div></div>
            <div class="font12 plr10">为你推荐</div>
            <div></div>
        </article>

        <article class="flex flex-jb flex-w">
            <div class="wuping ">
                <div class="wp-img"><img src="img/fdbd21a185c61093.jpg" alt=""></div>
                <p class="ellipsis font12 mt15">【顺丰快递+坏果包赔】正宗新疆阿克苏冰糖心苹果 带箱10斤精选水果团购礼盒装新鲜红富士 10斤装大果礼盒装（15-18个）
                </p>
                <div class="flex flex-ac">
                    <p class="red ">
                        <i class=" font12">￥</i>
                        54.6

                    </p>
                    <div class="red font12 miao ml10">秒杀</div>
                </div>
            </div>
            <div class="wuping ">
                <div class="wp-img"><img src="img/fdbd21a185c61093.jpg" alt=""></div>
                <p class="ellipsis font12 mt15">【顺丰快递+坏果包赔】正宗新疆阿克苏冰糖心苹果 带箱10斤精选水果团购礼盒装新鲜红富士 10斤装大果礼盒装（15-18个）
                </p>
                <div class="flex flex-ac">
                    <p class="red ">
                        <i class=" font12">￥</i>
                        54.6

                    </p>
                    <div class="red font12 miao ml10">秒杀</div>
                </div>
            </div>
            <div class="wuping ">
                <div class="wp-img"><img src="img/fdbd21a185c61093.jpg" alt=""></div>
                <p class="ellipsis font12 mt15">【顺丰快递+坏果包赔】正宗新疆阿克苏冰糖心苹果 带箱10斤精选水果团购礼盒装新鲜红富士 10斤装大果礼盒装（15-18个）
                </p>
                <div class="flex flex-ac">
                    <p class="red ">
                        <i class=" font12">￥</i>
                        54.6

                    </p>
                    <div class="red font12 miao ml10">秒杀</div>
                </div>
            </div>
            <div class="wuping ">
                <div class="wp-img"><img src="img/fdbd21a185c61093.jpg" alt=""></div>
                <p class="ellipsis font12 mt15">【顺丰快递+坏果包赔】正宗新疆阿克苏冰糖心苹果 带箱10斤精选水果团购礼盒装新鲜红富士 10斤装大果礼盒装（15-18个）
                </p>
                <div class="flex flex-ac">
                    <p class="red ">
                        <i class=" font12">￥</i>
                        54.6

                    </p>
                    <div class="red font12 miao ml10">秒杀</div>
                </div>
            </div>
            <div class="wuping ">
                <div class="wp-img"><img src="img/fdbd21a185c61093.jpg" alt=""></div>
                <p class="ellipsis font12 mt15">【顺丰快递+坏果包赔】正宗新疆阿克苏冰糖心苹果 带箱10斤精选水果团购礼盒装新鲜红富士 10斤装大果礼盒装（15-18个）
                </p>
                <div class="flex flex-ac">
                    <p class="red ">
                        <i class=" font12">￥</i>
                        54.6

                    </p>
                    <div class="red font12 miao ml10">秒杀</div>
                </div>
            </div>
            <div class="wuping ">
                <div class="wp-img"><img src="img/fdbd21a185c61093.jpg" alt=""></div>
                <p class="ellipsis font12 mt15">【顺丰快递+坏果包赔】正宗新疆阿克苏冰糖心苹果 带箱10斤精选水果团购礼盒装新鲜红富士 10斤装大果礼盒装（15-18个）
                </p>
                <div class="flex flex-ac">
                    <p class="red ">
                        <i class=" font12">￥</i>
                        54.6

                    </p>
                    <div class="red font12 miao ml10">秒杀</div>
                </div>
            </div>
            <div class="wuping ">
                <div class="wp-img"><img src="img/fdbd21a185c61093.jpg" alt=""></div>
                <p class="ellipsis font12 mt15">【顺丰快递+坏果包赔】正宗新疆阿克苏冰糖心苹果 带箱10斤精选水果团购礼盒装新鲜红富士 10斤装大果礼盒装（15-18个）
                </p>
                <div class="flex flex-ac">
                    <p class="red ">
                        <i class=" font12">￥</i>
                        54.6

                    </p>
                    <div class="red font12 miao ml10">秒杀</div>
                </div>
            </div>
            <div class="wuping ">
                <div class="wp-img"><img src="img/fdbd21a185c61093.jpg" alt=""></div>
                <p class="ellipsis font12 mt15">【顺丰快递+坏果包赔】正宗新疆阿克苏冰糖心苹果 带箱10斤精选水果团购礼盒装新鲜红富士 10斤装大果礼盒装（15-18个）
                </p>
                <div class="flex flex-ac">
                    <p class="red ">
                        <i class=" font12">￥</i>
                        54.6

                    </p>
                    <div class="red font12 miao ml10">秒杀</div>
                </div>
            </div>
            <div class="wuping ">
                <div class="wp-img"><img src="img/fdbd21a185c61093.jpg" alt=""></div>
                <p class="ellipsis font12 mt15">【顺丰快递+坏果包赔】正宗新疆阿克苏冰糖心苹果 带箱10斤精选水果团购礼盒装新鲜红富士 10斤装大果礼盒装（15-18个）
                </p>
                <div class="flex flex-ac">
                    <p class="red ">
                        <i class=" font12">￥</i>
                        54.6

                    </p>
                    <div class="red font12 miao ml10">秒杀</div>
                </div>
            </div>
            <div class="wuping ">
                <div class="wp-img"><img src="img/fdbd21a185c61093.jpg" alt=""></div>
                <p class="ellipsis font12 mt15">【顺丰快递+坏果包赔】正宗新疆阿克苏冰糖心苹果 带箱10斤精选水果团购礼盒装新鲜红富士 10斤装大果礼盒装（15-18个）
                </p>
                <div class="flex flex-ac">
                    <p class="red ">
                        <i class=" font12">￥</i>
                        54.6

                    </p>
                    <div class="red font12 miao ml10">秒杀</div>
                </div>
            </div>
            <div class="wuping ">
                <div class="wp-img"><img src="img/fdbd21a185c61093.jpg" alt=""></div>
                <p class="ellipsis font12 mt15">【顺丰快递+坏果包赔】正宗新疆阿克苏冰糖心苹果 带箱10斤精选水果团购礼盒装新鲜红富士 10斤装大果礼盒装（15-18个）
                </p>
                <div class="flex flex-ac">
                    <p class="red ">
                        <i class=" font12">￥</i>
                        54.6

                    </p>
                    <div class="red font12 miao ml10">秒杀</div>
                </div>
            </div>
            <div class="wuping ">
                <div class="wp-img"><img src="img/fdbd21a185c61093.jpg" alt=""></div>
                <p class="ellipsis font12 mt15">【顺丰快递+坏果包赔】正宗新疆阿克苏冰糖心苹果 带箱10斤精选水果团购礼盒装新鲜红富士 10斤装大果礼盒装（15-18个）
                </p>
                <div class="flex flex-ac">
                    <p class="red ">
                        <i class=" font12">￥</i>
                        54.6

                    </p>
                    <div class="red font12 miao ml10">秒杀</div>
                </div>
            </div>
            <div class="wuping ">
                <div class="wp-img"><img src="img/fdbd21a185c61093.jpg" alt=""></div>
                <p class="ellipsis font12 mt15">【顺丰快递+坏果包赔】正宗新疆阿克苏冰糖心苹果 带箱10斤精选水果团购礼盒装新鲜红富士 10斤装大果礼盒装（15-18个）
                </p>
                <div class="flex flex-ac">
                    <p class="red ">
                        <i class=" font12">￥</i>
                        54.6

                    </p>
                    <div class="red font12 miao ml10">秒杀</div>
                </div>
            </div>
            <div class="wuping ">
                <div class="wp-img"><img src="img/fdbd21a185c61093.jpg" alt=""></div>
                <p class="ellipsis font12 mt15">【顺丰快递+坏果包赔】正宗新疆阿克苏冰糖心苹果 带箱10斤精选水果团购礼盒装新鲜红富士 10斤装大果礼盒装（15-18个）
                </p>
                <div class="flex flex-ac">
                    <p class="red ">
                        <i class=" font12">￥</i>
                        54.6

                    </p>
                    <div class="red font12 miao ml10">秒杀</div>
                </div>
            </div>
            <div class="wuping ">
                <div class="wp-img"><img src="img/fdbd21a185c61093.jpg" alt=""></div>
                <p class="ellipsis font12 mt15">【顺丰快递+坏果包赔】正宗新疆阿克苏冰糖心苹果 带箱10斤精选水果团购礼盒装新鲜红富士 10斤装大果礼盒装（15-18个）
                </p>
                <div class="flex flex-ac">
                    <p class="red ">
                        <i class=" font12">￥</i>
                        54.6

                    </p>
                    <div class="red font12 miao ml10">秒杀</div>
                </div>
            </div>
            <div class="wuping ">
                <div class="wp-img"><img src="img/fdbd21a185c61093.jpg" alt=""></div>
                <p class="ellipsis font12 mt15">【顺丰快递+坏果包赔】正宗新疆阿克苏冰糖心苹果 带箱10斤精选水果团购礼盒装新鲜红富士 10斤装大果礼盒装（15-18个）
                </p>
                <div class="flex flex-ac">
                    <p class="red ">
                        <i class=" font12">￥</i>
                        54.6

                    </p>
                    <div class="red font12 miao ml10">秒杀</div>
                </div>
            </div>
        </article>
        <!-- logo -->
        <section class="bgWhite pt20 pb30">
            <article class="logo"></article>
        </section>

    </section>

    <footer>
        <article class="flex bgWhite  flex-ja p20">
            <a href="login.html">登录</a>
            <a href="reg.html">注册</a>
            <a href="#">客户服务</a>
            <a href="#fanhui">返回顶部</a>
        </article>
        <article class="flex flex-ja pt5 bgWhite">
            <a href="javascript:;"><img src="img/5ab1c0deN947bdcba.png" alt=""></a>
            <a href="javascript:;"><img src="img/5ab1c0f2N51c3f1bb.png" alt=""></a>
            <a href="javascript:;"><img src="img/5ab0b8e9Ne9c48331.png" alt=""></a>
        </article>
        <article class="font12 ptb5 tc bgWhite gray"> Copyright © 2004-2020 京东JD.com 版权所有</article>
        <div></div>

        <article class="flex flex-jb flex-ac bgWhite">
            <a href="index.html"><img src="img/82c582e7c375e4b3.png" alt=""></a>
            <a href="javascript:;"><img src="img/4af32f42575509d8.png" alt=""></a>
            <a href="javascript:;"><img src="img/a161ad4f4d2bb5ea.png" alt=""></a>
            <a href="javascript:;"><img src="img/f2fe0a88bf344736.png" alt=""></a>
            <a href="javascript:;"><img src="img/4dc0ec8a7e47c2b7.png" alt=""></a>
        </article>
    </footer>
    <aside> <a href="#fanhui"><i class=" iconfont icon-top font35 gray "></i></a></aside>
</body>

</html>